<template>
  <div class="permission-list p15 content-box">
    <div class="border">
      <div class="btn-container clearfix my-card-header">
        <span><i class="el-icon-s-operation"></i> 数据列表</span>
        <el-button
          icon="el-icon-plus"
          size="medium"
          class="fr"
          @click="formAdd=true"
        >新增</el-button>
      </div>
      <div class="list">
        <el-table
          :data="tableData"
          stripe
          tyle="width:100%"
          max-height="400"
          size="small"
          row-key="id"
          :tree-props="{children: 'childList'}"
          header-cell-class-name = "header-row"
          v-loading="loading"
        >
          <el-table-column prop="permissionName" label="名称" ></el-table-column>
          <el-table-column prop="permissionType" label="类型" ></el-table-column>
          <el-table-column prop="permission" label="权限名称" ></el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="del(scope.row)">弃用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
    <!--新增表单-->
    <el-dialog title="新增权限" :visible.sync="formAdd" width="500px" destroy-on-close :close-on-click-modal="false" center>
      <permission-add @changeState="formAdd = $event" @reload="initTableData"></permission-add>
    </el-dialog>
    <!--编辑表单-->
    <el-dialog title="权限编辑" :visible.sync="formEdit" :close-on-click-modal="false" width="500px" center>
      <permission-edit  ref="editDialog" @changeState="formEdit = $event" @reload="initTableData"></permission-edit>
    </el-dialog>
  </div>
</template>
<script>
import PermissionAdd from './permission-add'
import PermissionEdit from './permission-edit'
export default {
  data () {
    return {
      tableData: [],
      formAdd: false,
      formEdit: false,
      loading: false
    }
  },
  components: {
    PermissionAdd,
    PermissionEdit
  },
  mounted () {
    this.initTableData() // 初始化列表数据
  },
  methods: {
    initTableData () {
      this.loading = true
      this.$axios.get(`/org/permission/get-tree-list`)
      .then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.tableData = res.data.obj
        }
      })
    },
    edit (row) {
      this.id = row.id
      this.formEdit = true
      this.$nextTick(() => {
        this.$refs.editDialog.initSelectOption(row.id)
      })
    },
    del (row) {
      let field = {
        id: row.id,
        delState: 1
      }
      this.$axios.put('/org/permission/edit', field)
      .then(res => {
        if (res.data.code === 200) {
          this.page = 1
          this.initTableData()
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>
<style>
</style>
